<template>
  <div class="dashboard-editor-container">
    <el-row class="form-contain">
      <equip-statis-form @parkBoolean="receivePark"
                         @roadBoolean="receiveRoad"
                         @tableLoad="setTableLoad"
                         @tableData="getTableData"
                         :ranNum="ranNum"
                         :park="parkName"
                         :road="roadName"
                         :pageNum="pageNum"
                         :pageSize="pageSize"></equip-statis-form>
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="12" :sm="12" :lg="6">
        <div class='card-panel card-panel-one'>
          <div class="card-panel-icon-wrapper icon-heart">
            <svg-icon icon-class="heart" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text" align="right">
              <span style="margin-left: 0.2em;font-size: 1.0em">设备正常</span>
              <count-to style="font-size: 1.5em;color: #3669ad" class="card-panel-num" :startVal="0"
                        :endVal="0"></count-to>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6">
        <div class='card-panel card-panel-two'>
          <div class="card-panel-icon-wrapper ">
            <svg-icon icon-class="error" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text" align="right">
              <span style="margin-left: 0.2em;font-size: 1.0em">设备异常</span>
              <count-to style="font-size: 1.5em;color: #3669ad" class="card-panel-num" :startVal="0"
                        :endVal="0"></count-to>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6">
        <div class='card-panel card-panel-three'>
          <div class="card-panel-icon-wrapper icon-repair">
            <svg-icon icon-class="park" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text" align="right">
              <span style="margin-left: 0.2em;font-size: 1.0em">维修中</span>
              <count-to style="font-size: 1.5em;color: #3669ad" class="card-panel-num" :startVal="0"
                        :endVal="0"></count-to>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="12" :lg="6">
        <div class='card-panel card-panel-four'>
          <div class="card-panel-icon-wrapper icon-alert">
            <svg-icon icon-class="alert" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text" align="right">
              <span style="margin-left: 0.2em;font-size: 1.0em">故障发生</span>
              <count-to style="font-size: 1.5em;color: #3669ad" class="card-panel-num" :startVal="0"
                        :endVal="0"></count-to>
            </div>
          </div>
        </div>
      </el-col>

    </el-row>

    <el-row clsss="table_div" style="background-color: #1B4685;box-shadow: 0 4px 12px 0 rgba(0,0,0,0.20);border-radius: 2px;">
      <equip-statis-table
        @pageNum="setPageNum"
        @pageSize="setPageSize"
        @delSearch="tiggerSearch"
        :tableLoad="tableLoad"
        :tableData="tableData"></equip-statis-table>
    </el-row>
  </div>
</template>
<script>
  /* eslint-disable */
  import $ from 'jquery'
  import LineChart from "./mainStaChild/LineChart";
  import RaddarChart from "../dashboard/admin/components/RaddarChart";
  import PieChart from "./mainStaChild/PieChart";
  import BarChart from "./mainStaChild/BarChart";
  import EquipStatisTable from "./mainStaChild/EquipStatisTable";
  import EquipStatisForm from "./mainStaChild/EquipStatisForm";

  import CountTo from 'vue-count-to'

  export default {
    components: {
      BarChart,
      PieChart,
      RaddarChart,
      LineChart,
      EquipStatisTable,
      EquipStatisForm,
      CountTo
    },
    data() {
      return {
        tableData: {},
        editData: [],
        pageNum: 1,
        pageSize: 10,
        tableLoad: false,
        dialogParkVisible: false,
        dialogRoadVisible: false,
        addBerthVisible: false,
        editBerthVisible: false,
        parkLoading: false,
        roadLoading: false,
        ranNum: 0,
        parkType: 0,
        roadType: 0,
        parkName: '',
        parkName2: '',
        parkName3: '',
        roadName: '',
        roadName2: '',
        roadName3: ''
      }
    },
    methods: {
      receivePark: function (val) {
        this.parkType = 1
        this.parkLoading = val
        this.dialogParkVisible = val
      },
      receivePark2: function (val) {
        this.parkType = 2
        this.parkLoading = val
        this.dialogParkVisible = val
      },
      receivePark3: function (val) {
        this.parkType = 3
        this.parkLoading = val
        this.dialogParkVisible = val
      },
      receiveRoad: function (val) {
        this.roadType = 1
        this.roadLoading = val
        this.dialogRoadVisible = val
      },
      receiveRoad2: function (val) {
        this.roadType = 2
        this.roadLoading = val
        this.dialogRoadVisible = val
      },
      receiveRoad3: function (val) {
        this.roadType = 3
        this.roadLoading = val
        this.dialogRoadVisible = val
      },
      selectParkName: function (val) {
        if (this.parkType === 1) {
          this.parkName = val
        } else if (this.parkType === 2) {
          this.parkName2 = val
        } else if (this.parkType === 3) {
          this.parkName3 = val
        } else {
          console.log()
        }
      },
      selectRoadName: function (val) {
        if (this.roadType === 1) {
          this.roadName = val
        } else if (this.roadType === 2) {
          this.roadName2 = val
        } else if (this.roadType === 3) {
          this.roadName3 = val
        } else {
          console.log()
        }
      },
      openAdd: function (val) {
        this.addBerthVisible = val
      },
      openEdit: function (val) {
        this.editData = val[0]
        this.editBerthVisible = val[1]
      },
      /* 执行完操作后触发查询 */
      tiggerSearch: function (val) {
        this.ranNum = val
      },
      setPageNum: function (val) {
        this.pageNum = val
      },
      setPageSize: function (val) {
        this.pageSize = val
      },
      setTableLoad: function (val) {
        this.tableLoad = val
      },
      getTableData: function (val) {
        this.tableData = val
      }
    }
  }
</script>
<style lang="less" scoped>
  .dashboard-editor-container {
    padding-top: 10px;
    padding-left: 17px;
    padding-right: 17px;
    padding-bottom: 42px;
    background-color: #1A4380;
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  .card-panel-col {
    margin-bottom: 32px;
  }
  .card-panel-one{
    background: linear-gradient(#27B1D9, #1179B1);
  }
  .card-panel-two{
    background: linear-gradient(#27D99D, #11B164);
  }
  .card-panel-three{
    background: linear-gradient(#27D9D4, #11B1A9);
  }
  .card-panel-four{
    background: linear-gradient(#D9B427, #B17D11);
  }
  .card-panel {
    margin-bottom: 32px;
    height: 110px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);
    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }
      .icon-people {
        background: #40E0D0;
      }
      .icon-message {
        background: #36a3f7;
      }
      .icon-money {
        background: #EEB422;
      }
      .icon-shoppingCard {
        background: #548B54
      }
    }
    .icon-repair{
      color: #36a3f7;
    }

    .icon-heart {
      color: #25c97d;
    }
    .icon-alert {
      color: #c90a1f;
    }
    .icon-people {
      color: #40c9c6;
    }
    .icon-message {
      color: #36a3f7;
    }
    .icon-money {
      color: #F5A327;
    }
    .icon-shoppingCard {
      color: #ACD261
    }
    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }
    .card-panel-icon {
      float: left;
      font-size: 48px;
    }
    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px 15px;
      margin-left: 0px;
      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }
      .card-panel-num {
        font-size: 20px;
      }
    }
  }

  .card-panel-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>
